<template>
  <div class="require">
    <van-nav-bar title="文章详情" left-arrow   @click-left="onClickLeft">
    </van-nav-bar>
    <van-skeleton title avatar :row="3" :loading="loading" animate>
      <div class="require-title">{{article.title}}</div>
        <div class="require-intro">{{article.author}}</div>
        <div class="require-img">
          <img :src="article.front_cover.host+'/'+article.front_cover.relative_path">
        </div>
      <div class="require-textarea"> 
        <div v-html="html" />
      </div>
      <div class="require-praise">
        <i v-if="praise" @click="praiseArticle"><svg t="1645367705767" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13888" width="30" height="30"><path d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z" p-id="13889"></path></svg></i>
        <i v-else><svg t="1649673960134" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2606" width="30" height="30"><path d="M264.533333 494.933333H166.4c-27.733333 0-51.2 23.466667-51.2 51.2v324.266667c0 27.733333 23.466667 51.2 51.2 51.2h98.133333c12.8 0 21.333333-8.533333 21.333334-21.333333v-384c0-10.666667-10.666667-21.333333-21.333334-21.333334M347.733333 921.6H810.666667c42.666667 0 76.8-29.866667 83.2-70.4l57.6-341.333333c8.533333-51.2-32-100.266667-83.2-100.266667H576l25.6-157.866667c12.8-78.933333-46.933333-149.333333-125.866667-149.333333h-10.666666c-29.866667 0-55.466667 21.333333-61.866667 49.066667l-66.133333 307.2c-4.266667 23.466667-8.533333 46.933333-8.533334 72.533333v369.066667c-2.133333 12.8 8.533333 21.333333 19.2 21.333333" fill="#80B8F8" p-id="2607"></path></svg></i>
        <div></div>
        <span>{{article.like_number}}</span>
      </div>

    </van-skeleton>
    <markdown-editor
      v-show="false"
      ref="MarkdownEditor"
      v-model="mark"
      :options="{
        hideModeSwitch:true,
        previewStyle:'tab'
      }"
      height="600px"
      style=""
    />
  
  </div>
</template>

<script>
import MarkdownEditor from './index'
import {articleDetail , likeArticle} from '@/api/article'
export default {
  name:"require",
  components: {
    MarkdownEditor
  },
  data(){
    return {
      article:{
        front_cover:{
          host:''
        }
      },
      loading:true,
      praise:true,
      mark: '',
      html: ''
    }
  },
  created() {
    this.getArticleDetail()
    this.shutDown()
  },
  computed:{
    date(){
      let s = this.article.created_at;
      if(s){
        let str = s.substring(0,10);
        return str;
      }
    },
  },
  mounted() {
    setTimeout(() => { this.html = this.$refs.MarkdownEditor.getHtml() }, 1000)
  },
  watch: {
    mark(n, o) {
      this.html = this.$refs.MarkdownEditor.getHtml()
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    // 获取文章详情
    getArticleDetail(){
      let str = this.$route.query.q;
      let t = parseInt(str);
      articleDetail(t).then(res=>{
        this.article = res.data
        this.mark = res.data.content
      })
    },
    shutDown(){
      setTimeout(()=> {
        this.loading = false;
      },1000)
    },
    praiseArticle(){
      let str  = this.$route.query.q
      let t = parseInt(str);
      likeArticle(t).then(res=>{
        if(res.code==0){
          this.praise = false;
          this.article.like_number += 1;
        }
      })
    }
  }
}
</script>

<style lang="less">
.van-nav-bar__arrow {
    margin-right: 4px;
    font-size: 25px;
  }
.van-nav-bar .van-icon {
    color: #000000;
}
.require-title {

  width: 90%;
  margin: 15px auto;
  color: rgba(16, 16, 16, 100);
  font-size: 20px;
  text-align: left;
  font-family: PingFangSC-light;
}
.require-intro {
  width: 90%;
  margin: 2px auto;
  text-align: left;
  font-size: 15px;
  text-align: left;
  font-family: PingFangSC-regular;
}
.require-img{

    width: 90%;
    margin: 10px auto;
  img {
    width: 100%;
    height: 100%;
  }
}
.require-textarea {
  width: 90%;
  margin: 10px auto;
  font-size: 18px;
  text-align: left;
  font-family: PingFangSC-light;
  line-height:30px
}
.require-praise {
  margin: 10px auto;
  width: 71px;
  height: 71px;
  // padding-top: 10px;
  // line-height: 20px;
  text-align: center;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
  border-radius: 50% 50%;
  display: flex;
  flex-direction : column;
  // justify-content: space-around;
  i {
    margin-top: 10px;
  }
}
</style>